<template>
  <view>
    <up-image width="100%" height="320rpx" radius="10rpx" :src="infoDetail.image[0]" />
    <up-gap height="28rpx" />
    <view class="info-box">
      <view class="title mb-24rpx">
        基本信息
        {{info}}
      </view>
      <view class="flex flex-wrap gap-22rpx">
        <view class="h-[138rpx] w-202rpx rounded-[16rpx] bg-#f8f8f8 px-20rpx py-24rpx">
          <view class="text-[#333333]; mb-16rpx text-[30rpx] font-bold leading-[44rpx]">
            {{infoDetail.born_time}}
          </view>
          <view class="text-20rpx color-#4e5969 leading-28rpx">
            成立时间
          </view>
        </view>
        <view class="h-[138rpx] w-202rpx rounded-[16rpx] bg-#f8f8f8 px-20rpx py-24rpx">
          <view class="text-[#333333]; mb-16rpx text-[30rpx] font-bold leading-[44rpx]">
            {{infoDetail.born_money}} <text class="text-20rpx color-#4e5969">
              万
            </text>
          </view>
          <view class="text-20rpx color-#4e5969 leading-28rpx">
            注册资本
          </view>
        </view>
        <view class="h-[138rpx] w-202rpx rounded-[16rpx] bg-#f8f8f8 px-20rpx py-24rpx">
          <view class="text-[#333333]; mb-16rpx text-[30rpx] font-bold leading-[44rpx]">
            {{infoDetail.num}} <text class="text-20rpx color-#4e5969">
              人
            </text>
          </view>
          <view class="text-20rpx color-#4e5969 leading-28rpx">
            公司人数
          </view>
        </view>
        <view class="h-[138rpx] w-202rpx rounded-[16rpx] bg-#f8f8f8 px-20rpx py-24rpx">
          <view class="text-[#333333]; mb-16rpx text-[30rpx] font-bold leading-[44rpx]">
            {{infoDetail.job_count}} <text class="text-20rpx color-#4e5969">
              个
            </text>
          </view>
          <view class="text-20rpx color-#4e5969 leading-28rpx">
            招聘职位数
          </view>
        </view>
        <view class="h-[138rpx] w-202rpx rounded-[16rpx] bg-#f8f8f8 px-20rpx py-24rpx">
          <view class="text-[#333333]; mb-16rpx text-[30rpx] font-bold leading-[44rpx]">
            {{infoDetail.job_num}} <text class="text-20rpx color-#4e5969">
              人
            </text>
          </view>
          <view class="text-20rpx color-#4e5969 leading-28rpx">
            招聘人数
          </view>
        </view>
      </view>
    </view>
    <up-gap height="24rpx" />
    <view class="info-box">
      <view class="mb-24rpx flex items-center justify-between">
        <text class="title">
          公司介绍
        </text>
        <view v-if="clientType === 'enterprise'"
          class="w-[112rpx] rounded-[22rpx] bg-#f7f7f8 text-center text-22rpx color-#1d2129 leading-44rpx">
          编辑
        </view>
      </view>
      <view class="content text-left text-[26rpx] text-[#4e4e4e] leading-62rpx" v-html="infoDetail.about_us">
      </view>
      <up-gap height="18rpx" />
      <up-line color="#ebebeb" />
      <up-gap height="20rpx" />
      <view class="mb-22rpx flex items-center">
        <up-icon size="32rpx" :name="Company1" />
        <text class="mr-6rpx text-[26rpx] text-[#1d2129]">
          地点:
        </text>
        <text class="max-w-70% text-[26rpx] text-[#4e5969]">
          {{infoDetail.province}}·{{infoDetail.city}} {{infoDetail.address}}
        </text>
        <view class="ml-auto">
          <up-copy v-if="clientType === 'customer'" content="北京·海淀区 海淀区1号院10-11">
            <view class="flex items-center">
              <up-icon name="file-text-fill" size="24rpx" />
              <text>复制</text>
            </view>
          </up-copy>
          <view v-if="clientType === 'enterprise'"
            class="w-[112rpx] rounded-[22rpx] bg-#f7f7f8 text-center text-22rpx color-#1d2129 leading-44rpx">
            编辑
          </view>
        </view>
      </view>
      <view class="flex items-center">
        <up-icon size="32rpx" :name="Company2" />
        <text class="mr-6rpx text-[26rpx] text-[#1d2129]">
          官网:
        </text>
        <text class="max-w-70% text-[26rpx] text-[#4e5969]">
          {{infoDetail.official_website}}
        </text>
      </view>
    </view>
    <up-gap height="30rpx" />
    <view>
      <view class="title mb-24rpx px-24rpx">
        企业风光
      </view>
      <view class="flex flex-wrap justify-between gap-22rpx">
        <up-image width="340rpx" height="220rpx" radius="10rpx" v-for="item in infoDetail.image" :src="item" />
        <up-upload v-if="clientType === 'enterprise'" :file-list="fileList" name="6" multiple :max-count="1" width="250"
          height="150" @after-read="afterRead" @delete="deletePic">
          <view
            class="h-[220rpx] w-[340rpx] flex flex-col items-center justify-center border-[2rpx] border-[#999999] rounded-[16rpx] border-dashed">
            <up-icon name="photo" size="50rpx" color="#999999" />
            <text class="mt-6rpx text-26rpx color-#999999">
              点击上传
            </text>
          </view>
        </up-upload>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
  import { useUserStore } from '@/store';
  // import Company1 from '@/static/images/common/company-1.png';
  // import Company2 from '@/static/images/common/company-2.png';
  const Company1 = 'https://yiliao.test03.qcw800.com/static/images/common/company-1.png'
  const Company2 = 'https://yiliao.test03.qcw800.com/static/images/common/company-2.png'

  const { clientType } = useUserStore();

  const fileList = ref([]);
  const afterRead = () => { };
  const deletePic = () => { };
  const props = defineProps({
    isreferral: {
      type: Boolean,
      default: false,
    },
    infoDetail: {
      type: Array,
      default: () => [{
        id: 0,
        born_year: 0,
        logo: '',
        name: '',
        type: '',
        listed: '',
        province: '',
        city: '',
        adress: '',
        num: '',
        born_time: '',
        born_money: '',
        job_count: 0,
        job_num: 0,
        about_us: '',
        official_website: '',
        image: [],
        image_detail: []
      }],
    }
  });
</script>

<style scoped lang="scss">
  .title {
    @apply text-[26rpx] text-[#1d2129] leading-[36rpx] font-600;
  }

  .info-box {
    @apply rounded-[20rpx] bg-#fff p-24rpx shadow-[0rpx_6rpx_16rpx_0rpx_rgba(191, 191, 191, 0.26)];
  }
</style>
